import QtQuick 2.2
import Qt.labs.folderlistmodel 2.1
Item {

    Row {
        id: listHeader

        property int iconWidth: 20
        property int fileNameWidth: 130
        property int fileSizeWidth: 50
        property int fileModifiedWidth: 200


        anchors.left: parent.left
        anchors.top: parent.top
        anchors.right: parent.right

        height: 20

        Rectangle {
            anchors.top: parent.top
            anchors.bottom: parent.bottom

            width: listHeader.iconWidth
            color: "#7667d7"
            border.color: "#070606"
            gradient: Gradient {
                GradientStop {
                    position: 0.34;
                    color: "#7667d7";
                }
                GradientStop {
                    position: 0.87;
                    color: "#ffffff";
                }
            }

            Text {
                anchors.centerIn: parent
                text: 'Icon'
            }
        }

        Rectangle {
            id: topName
            anchors.top: parent.top
            anchors.bottom: parent.bottom

            width: listHeader.fileNameWidth
            color: "#7667d7"
            border.color: "#0d0c0c"
            gradient: Gradient {
                GradientStop {
                    position: 0.22;
                    color: "#7667d7";
                }
                GradientStop {
                    position: 0.81;
                    color: "#ffffff";
                }
            }

            Text {
                anchors.centerIn: parent
                text: 'Name'
            }

            MouseArea{
                anchors.fill: parent
                onClicked: {
                    colorChanged()
                    folderModel.sortField = 1;// FolderListModel.Name;
                    console.log("Hi >>>")

                }

            }
        }

        Rectangle {
            anchors.top: parent.top
            anchors.bottom: parent.bottom

            width: listHeader.fileSizeWidth
            color: "yellow"
            border.color: "#7667d7"
            gradient: Gradient {
                GradientStop {
                    position: 0.30;
                    color: "#7667d7";
                }
                GradientStop {
                    position: 0.80;
                    color: "#ffffff";
                }
            }

            Text {
                anchors.centerIn: parent
                text: 'Size'
            }

            MouseArea{
                anchors.fill: parent
                onClicked: {
                    folderModel.sortField = 3;// FolderListModel.Name;
                    console.log("Hi >>>")

                }
            }
        }

        Rectangle {
            anchors.top: parent.top
            anchors.bottom: parent.bottom


            width: listHeader.fileModifiedWidth
            color: "#33e033"
            border.color: "#051e1c"
            gradient: Gradient {
                GradientStop {
                    position: 0.29;
                    color: "#7667d7";
                }
                GradientStop {
                    position: 0.81;
                    color: "#ffffff";
                }
            }

            Text {
                anchors.centerIn: parent
                text: 'Date'
            }
            MouseArea{
                anchors.fill: parent
                onClicked: {
                    folderModel.sortField = 2;// FolderListModel.Name;
                    console.log("Hi >>>")

                }
            }        }
    }

    ListView {
        model: folderModel

        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        anchors.top: listHeader.bottom

        delegate: panelSimpleDelegate
        clip: true
        focus: true

        highlight: Rectangle { color: "gray"
            border.color: "black"
            opacity: .2
            radius: 3
        }

        highlightFollowsCurrentItem: true

        onCurrentIndexChanged: {
                console.log("Cur index >>>", currentIndex);
            }

        header: Rectangle {
            width: 25
            height: 25

            Image {
                anchors.fill: parent
                source: "up_icons.png"
            }

            //Text {
            //text: "Up"
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    folderModel.folder = folderModel.parentFolder
                }
            }
        }


        FolderListModel {
            id: folderModel
            //  nameFilters: ["*.qml"]
            folder: 'file:///'           //"file:///c:"
           // showDotAndDotDot: true



            onFolderChanged: {
                console.log("folder > ", folderModel.folder);

            }
            onParentFolderChanged: {
                console.log("parentFolder > ", folderModel.parentFolder);
            }
        }

        Component {
           id: panelSimpleDelegate


           Item {
                height: fileNameText.height
                width: row.width


                Row{
                    id: row
                    spacing: 10
                    Rectangle {
                        id: icon
                        height: fileNameText.height
                        width: listHeader.iconWidth
                        color: "#7667d7"
                        border.color: "#050504"
                        gradient: Gradient {
                            GradientStop {
                                position: 0.07;
                                color: "#7667d7";
                            }
                            GradientStop {
                                position: 0.74;
                                color: "#ffffff";
                            }
                        }
                    }
                    Text {
                        id: fileNameText
                        clip: true
                        width: listHeader.fileNameWidth
                        color: "black"
                        text: fileIsDir ? '[' + fileName + ']' : fileName
                        font.family: "Plantagenet Cherokee"
                        font.bold: fileIsDir ? true : false

                        styleColor: "#751ed1"
                        font.pointSize: 12


                        MouseArea {
                            anchors.fill: parent
                            hoverEnabled: true

                            onClicked: {
                                var f = folderModel.folder.toString();

                                console.log(typeof(f));
                                console.log('fileIsDir' + '>>>' + fileIsDir);



                                if(f.substring(f.length-1) != "/")
                                    //                    if(f.right(1) != "/")
                                {
                                    f += "/";
                                }
                                f += fileName;
                                folderModel.folder = f;
                            }
                        }

                    }
                    Text {
                        id: fileSizeText
                        color: "black"
                        text: fileIsDir ? '<Dir>' : fileSize
                        clip: true
                        font.family: "Plantagenet Cherokee"
                        styleColor: "#751ed1"
                        font.pointSize: 12
                        width: listHeader.fileSizeWidth

                    }

                    Text {
                        id: fileModifiedText
                        color: "black"
                        clip: true
                        text: fileModified
                        font.family: "Plantagenet Cherokee"
                        styleColor: "#751ed1"
                        font.pointSize: 12
                        width: listHeader.fileModifiedWidth

                    }

                }
            }
        }
    }

}

